<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 中华非遗</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="morandi-theme">
    <!-- 导航栏组件容器 -->
    <div id="navbar-container"></div>

    <!-- 主要内容区域 -->
    <main style="margin-top: 70px;">
        <!-- 个人信息区块 -->
        <section class="profile-header morandi-header">
            <div class="container">
                <div class="profile-info">
                    <div class="profile-avatar">
                        <div class="avatar-placeholder morandi-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <button class="avatar-edit morandi-edit-btn">
                            <i class="fas fa-camera"></i>
                        </button>
                    </div>
                    <div class="profile-details">
                        <h1 class="profile-name morandi-text-primary">文化爱好者</h1>
                        <p class="profile-title morandi-text-secondary">非遗传承者 · 文化探索者</p>
                        <div class="profile-stats morandi-stats">
                            <div class="stat-item morandi-stat-learning">
                                <span class="stat-number">8</span>
                                <span class="stat-label">学习课程</span>
                            </div>
                            <div class="stat-item morandi-stat-creative">
                                <span class="stat-number">23</span>
                                <span class="stat-label">创作作品</span>
                            </div>
                            <div class="stat-item morandi-stat-collection">
                                <span class="stat-number">45</span>
                                <span class="stat-label">收藏内容</span>
                            </div>
                        </div>
                    </div>
                    <div class="profile-actions">
                        <button class="btn morandi-btn-primary">编辑资料</button>
                        <button class="btn morandi-btn-secondary">个人设置</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 主要功能区域 -->
        <section class="main-dashboard">
            <div class="container">
                <div class="dashboard-layout">
                    <!-- 学习中心模块 -->
                    <div class="dashboard-section learning-center">
                        <div class="section-header">
                            <div class="section-icon morandi-learning-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div class="section-title-group">
                                <h2 class="section-title">学习中心</h2>
                                <p class="section-subtitle">探索知识，传承文化</p>
                            </div>
                        </div>
                        
                        <div class="section-tabs morandi-tabs">
                            <button class="section-tab-btn active" data-tab="learning">
                                <i class="fas fa-book-open"></i>
                                <span>我的学习</span>
                            </button>
                            <button class="section-tab-btn" data-tab="favorites">
                                <i class="fas fa-heart"></i>
                                <span>我的收藏</span>
                            </button>
                            <button class="section-tab-btn" data-tab="recommend">
                                <i class="fas fa-star"></i>
                                <span>精选推荐</span>
                            </button>
                        </div>

                        <div class="section-content">
                            <!-- 我的学习 -->
                            <div class="tab-content active" id="learning">
                                <div class="learning-overview">
                           
                                </div>

                                <div class="current-courses">
                                    <h3 class="content-subtitle">正在学习的课程</h3>
                                    <div class="course-list morandi-course-list">
                                        <div class="course-item morandi-course-item">
                                            <div class="course-thumb morandi-thumb-blue">
                                                <i class="fas fa-cut"></i>
                                            </div>
                                            <div class="course-details">
                                                <h4>剪纸艺术制作技艺</h4>
                                                <p class="course-instructor">民间艺术大师 · 国家级传承人</p>
                                                <div class="progress-bar morandi-progress">
                                                    <div class="progress-fill" style="width: 75%"></div>
                                                </div>
                                                <span class="progress-text">进度 75% (9/12课时)</span>
                                            </div>
                                            <button class="btn morandi-btn-continue">继续学习</button>
                                        </div>

                                        <div class="course-item morandi-course-item">
                                            <div class="course-thumb morandi-thumb-green">
                                                <i class="fas fa-dragon"></i>
                                            </div>
                                            <div class="course-details">
                                                <h4>龙舟制作工艺</h4>
                                                <p class="course-instructor">造船工艺师 · 省级传承人</p>
                                                <div class="progress-bar morandi-progress">
                                                    <div class="progress-fill" style="width: 30%"></div>
                                                </div>
                                                <span class="progress-text">进度 30% (6/20课时)</span>
                                            </div>
                                            <button class="btn morandi-btn-continue">继续学习</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="completed-section">
                                    <h3 class="content-subtitle">最近完成</h3>
                                    <div class="completed-grid">
                                        <div class="completed-item morandi-completed-item">
                                            <i class="fas fa-theater-masks"></i>
                                            <span class="completed-title">皮影戏艺术</span>
                                            <span class="completion-date">2024-01-15</span>
                                        </div>
                                        <div class="completed-item morandi-completed-item">
                                            <i class="fas fa-leaf"></i>
                                            <span class="completed-title">英德红茶制作技艺</span>
                                            <span class="completion-date">2023-12-20</span>
                                        </div>
                                        <div class="completed-item morandi-completed-item">
                                            <i class="fas fa-mountain"></i>
                                            <span class="completed-title">大吴泥塑工艺</span>
                                            <span class="completion-date">2023-11-30</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 我的收藏 -->
                            <div class="tab-content" id="favorites">
                                <div class="favorites-header">
                                    <div class="filter-tabs morandi-filter-tabs">
                                        <button class="filter-btn active" data-filter="all">
                                            <i class="fas fa-th-large"></i>
                                            <span>全部</span>
                                        </button>
                                        <button class="filter-btn" data-filter="courses">
                                            <i class="fas fa-graduation-cap"></i>
                                            <span>课程</span>
                                        </button>
                                        <button class="filter-btn" data-filter="articles">
                                            <i class="fas fa-file-alt"></i>
                                            <span>文章</span>
                                        </button>
                                        <button class="filter-btn" data-filter="videos">
                                            <i class="fas fa-video"></i>
                                            <span>视频</span>
                                        </button>
                                    </div>
                                </div>

                                <div class="favorites-grid morandi-favorites-grid">
                                    <div class="favorite-item morandi-favorite-item" data-type="courses">
                                        <div class="favorite-thumb morandi-thumb-blue">
                                            <i class="fas fa-theater-masks"></i>
                                        </div>
                                        <div class="favorite-info">
                                            <h4>皮影戏艺术课程</h4>
                                            <p>运用光学原理的传统戏剧艺术形式</p>
                                            <div class="favorite-meta">
                                                <span class="favorite-type">课程</span>
                                                <span class="favorite-date">2024-01-10</span>
                                            </div>
                                        </div>
                                        <div class="favorite-actions">
                                            <button class="btn morandi-btn-small">开始学习</button>
                                            <button class="btn morandi-btn-outline-small">取消收藏</button>
                                        </div>
                                    </div>

                                    <div class="favorite-item morandi-favorite-item" data-type="articles">
                                        <div class="favorite-thumb morandi-thumb-green">
                                            <i class="fas fa-leaf"></i>
                                        </div>
                                        <div class="favorite-info">
                                            <h4>英德红茶制作技艺</h4>
                                            <p>融合生物发酵学的传统制茶工艺</p>
                                            <div class="favorite-meta">
                                                <span class="favorite-type">文章</span>
                                                <span class="favorite-date">2024-01-05</span>
                                            </div>
                                        </div>
                                        <div class="favorite-actions">
                                            <button class="btn morandi-btn-small">阅读文章</button>
                                            <button class="btn morandi-btn-outline-small">取消收藏</button>
                                        </div>
                                    </div>

                                    <div class="favorite-item morandi-favorite-item" data-type="videos">
                                        <div class="favorite-thumb morandi-thumb-purple">
                                            <i class="fas fa-dragon"></i>
                                        </div>
                                        <div class="favorite-info">
                                            <h4>龙舟制作技艺视频</h4>
                                            <p>融合流体力学的传统造船技术</p>
                                            <div class="favorite-meta">
                                                <span class="favorite-type">视频</span>
                                                <span class="favorite-date">2023-12-28</span>
                                            </div>
                                        </div>
                                        <div class="favorite-actions">
                                            <button class="btn morandi-btn-small">观看视频</button>
                                            <button class="btn morandi-btn-outline-small">取消收藏</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 精选推荐 -->
                            <div class="tab-content" id="recommend">
                                <div class="recommend-sections">
                                    <div class="recommend-courses-section">
                                        <h3 class="content-subtitle">为您推荐的课程</h3>
                                        <div class="recommend-courses morandi-recommend-courses">
                                            <div class="recommend-item morandi-recommend-item">
                                                <div class="recommend-thumb morandi-thumb-blue">
                                                    <i class="fas fa-mountain"></i>
                                                </div>
                                                <div class="recommend-info">
                                                    <h4>大吴泥塑艺术</h4>
                                                    <p>运用地质学原理的传统泥塑艺术</p>
                                                    <div class="recommend-meta">
                                                        <span class="rating morandi-rating">★★★★★ 4.8</span>
                                                        <span class="students">1.2k 学员</span>
                                                    </div>
                                                </div>
                                                <button class="btn morandi-btn-recommend">开始学习</button>
                                            </div>

                                            <div class="recommend-item morandi-recommend-item">
                                                <div class="recommend-thumb morandi-thumb-green">
                                                    <i class="fas fa-cogs"></i>
                                                </div>
                                                <div class="recommend-info">
                                                    <h4>象牙雕刻技艺</h4>
                                                    <p>体现精密加工技术的传统雕刻艺术</p>
                                                    <div class="recommend-meta">
                                                        <span class="rating morandi-rating">★★★★☆ 4.6</span>
                                                        <span class="students">856 学员</span>
                                                    </div>
                                                </div>
                                                <button class="btn morandi-btn-recommend">开始学习</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="recommend-articles-section">
                                        <h3 class="content-subtitle">热门文章推荐</h3>
                                        <div class="recommend-articles morandi-recommend-articles">
                                            <div class="article-item morandi-article-item">
                                                <div class="article-icon morandi-article-icon">
                                                    <i class="fas fa-cut"></i>
                                                </div>
                                                <div class="article-content">
                                                    <h4>剪纸艺术的几何美学原理</h4>
                                                    <p>体现材料学与几何学的民间艺术形式</p>
                                                    <div class="article-meta">
                                                        <span>3.2k 阅读</span>
                                                        <span>256 点赞</span>
                                                        <span>2024-01-15</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="article-item morandi-article-item">
                                                <div class="article-icon morandi-article-icon">
                                                    <i class="fas fa-edit"></i>
                                                </div>
                                                <div class="article-content">
                                                    <h4>白沙茅龙笔的生物材料科学</h4>
                                                    <p>运用生物材料科学的传统笔具制作技艺</p>
                                                    <div class="article-meta">
                                                        <span>2.8k 阅读</span>
                                                        <span>189 点赞</span>
                                                        <span>2024-01-12</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 管理中心模块 -->
                    <div class="dashboard-section management-center">
                        <div class="section-header">
                            <div class="section-icon morandi-management-icon">
                                <i class="fas fa-cogs"></i>
                            </div>
                            <div class="section-title-group">
                                <h2 class="section-title">管理中心</h2>
                                <p class="section-subtitle">个人设置与创作管理</p>
                            </div>
                        </div>

                        <div class="section-tabs morandi-tabs">
                            <button class="section-tab-btn active" data-tab="creative">
                                <i class="fas fa-palette"></i>
                                <span>创作中心</span>
                            </button>
                            <button class="section-tab-btn" data-tab="community">
                                <i class="fas fa-users"></i>
                                <span>社区动态</span>
                            </button>
                            <button class="section-tab-btn" data-tab="account">
                                <i class="fas fa-user-cog"></i>
                                <span>账号管理</span>
                            </button>
                            <button class="section-tab-btn" data-tab="privacy">
                                <i class="fas fa-shield-alt"></i>
                                <span>隐私保护</span>
                            </button>
                            <button class="section-tab-btn" data-tab="contact">
                                <i class="fas fa-headset"></i>
                                <span>联系我们</span>
                            </button>
                        </div>

                        <div class="section-content">
                            <!-- 创作中心 -->
                            <div class="tab-content active" id="creative">
                                <div class="creative-dashboard morandi-creative-dashboard">
                                    <div class="create-actions morandi-create-actions">
                                        <button class="create-btn morandi-create-btn">
                                            <i class="fas fa-plus-circle"></i>
                                            <span>发布作品</span>
                                        </button>
                                        <button class="create-btn morandi-create-btn">
                                            <i class="fas fa-edit"></i>
                                            <span>写文章</span>
                                        </button>
                                        <button class="create-btn morandi-create-btn">
                                            <i class="fas fa-video"></i>
                                            <span>上传视频</span>
                                        </button>
                                        <button class="create-btn morandi-create-btn">
                                            <i class="fas fa-images"></i>
                                            <span>分享图片</span>
                                        </button>
                                    </div>

                                    <div class="creative-works">
                                        <h3 class="content-subtitle">我的创作</h3>
                                        <div class="works-list morandi-works-list">
                                            <div class="work-item morandi-work-item">
                                                <div class="work-thumb morandi-work-thumb">
                                                    <i class="fas fa-file-image"></i>
                                                </div>
                                                <div class="work-info">
                                                    <h4>我的剪纸作品集</h4>
                                                    <div class="work-stats">
                                                        <span><i class="fas fa-eye"></i> 256</span>
                                                        <span><i class="fas fa-heart"></i> 23</span>
                                                        <span><i class="fas fa-comment"></i> 8</span>
                                                    </div>
                                                    <span class="work-date">2024-01-12</span>
                                                </div>
                                                <div class="work-actions">
                                                    <button class="btn morandi-btn-small">编辑</button>
                                                    <button class="btn morandi-btn-outline-small">删除</button>
                                                </div>
                                            </div>

                                            <div class="work-item morandi-work-item">
                                                <div class="work-thumb morandi-work-thumb">
                                                    <i class="fas fa-file-alt"></i>
                                                </div>
                                                <div class="work-info">
                                                    <h4>非遗学习心得分享</h4>
                                                    <div class="work-stats">
                                                        <span><i class="fas fa-eye"></i> 189</span>
                                                        <span><i class="fas fa-heart"></i> 15</span>
                                                        <span><i class="fas fa-comment"></i> 12</span>
                                                    </div>
                                                    <span class="work-date">2024-01-08</span>
                                                </div>
                                                <div class="work-actions">
                                                    <button class="btn morandi-btn-small">编辑</button>
                                                    <button class="btn morandi-btn-outline-small">删除</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 社区动态 -->
                            <div class="tab-content" id="community">
                                <div class="community-section morandi-community-section">
                                    <div class="community-overview">
                                        <div class="community-stats">
                                            <div class="stat-card morandi-stat-card">
                                                <i class="fas fa-edit"></i>
                                                <div class="stat-info">
                                                    <span class="stat-number">12</span>
                                                    <span class="stat-label">发布帖子</span>
                                                </div>
                                            </div>
                                            <div class="stat-card morandi-stat-card">
                                                <i class="fas fa-comment"></i>
                                                <div class="stat-info">
                                                    <span class="stat-number">48</span>
                                                    <span class="stat-label">参与回复</span>
                                                </div>
                                            </div>
                                            <div class="stat-card morandi-stat-card">
                                                <i class="fas fa-heart"></i>
                                                <div class="stat-info">
                                                    <span class="stat-number">156</span>
                                                    <span class="stat-label">获得点赞</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="recent-activities">
                                        <h3 class="content-subtitle">最近动态</h3>
                                        <div class="activity-list morandi-activity-list">
                                            <div class="activity-item morandi-activity-item">
                                                <div class="activity-icon">
                                                    <i class="fas fa-comment-dots"></i>
                                                </div>
                                                <div class="activity-content">
                                                    <p>在 <strong>剪纸艺术讨论</strong> 中发表了新回复</p>
                                                    <span class="activity-time">2小时前</span>
                                                </div>
                                            </div>
                                            <div class="activity-item morandi-activity-item">
                                                <div class="activity-icon">
                                                    <i class="fas fa-plus-circle"></i>
                                                </div>
                                                <div class="activity-content">
                                                    <p>发布了新帖子 <strong>非遗传承的现代意义</strong></p>
                                                    <span class="activity-time">1天前</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 账号管理 -->
                            <div class="tab-content" id="account">
                                <div class="account-settings morandi-account-settings">
                                    <div class="settings-grid">
                                        <div class="setting-card morandi-setting-card">
                                            <h3>基本信息</h3>
                                            <div class="setting-items">
                                                <div class="setting-item">
                                                    <span class="setting-label">用户名</span>
                                                    <span class="setting-value">文化爱好者</span>
                                                    <button class="btn morandi-btn-link">修改</button>
                                                </div>
                                                <div class="setting-item">
                                                    <span class="setting-label">邮箱</span>
                                                    <span class="setting-value">user@example.com</span>
                                                    <button class="btn morandi-btn-link">验证</button>
                                                </div>
                                                <div class="setting-item">
                                                    <span class="setting-label">手机号</span>
                                                    <span class="setting-value">138****5678</span>
                                                    <button class="btn morandi-btn-link">更换</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="setting-card morandi-setting-card">
                                            <h3>账号安全</h3>
                                            <div class="security-items">
                                                <div class="security-item morandi-security-item">
                                                    <div class="security-info">
                                                        <h4>登录密码</h4>
                                                        <p>定期更换密码有助于保护账号安全</p>
                                                    </div>
                                                    <button class="btn morandi-btn-small">修改密码</button>
                                                </div>
                                                <div class="security-item morandi-security-item">
                                                    <div class="security-info">
                                                        <h4>双重验证</h4>
                                                        <p>启用双重验证增强账号安全性</p>
                                                    </div>
                                                    <div class="toggle-switch morandi-toggle">
                                                        <input type="checkbox" id="two-factor">
                                                        <label for="two-factor"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 隐私保护 -->
                            <div class="tab-content" id="privacy">
                                <div class="privacy-settings morandi-privacy-settings">
                                    <div class="privacy-grid">
                                        <div class="privacy-card morandi-privacy-card">
                                            <h3>个人信息可见性</h3>
                                            <div class="privacy-items">
                                                <div class="privacy-item morandi-privacy-item">
                                                    <div class="privacy-info">
                                                        <h4>个人资料</h4>
                                                        <p>设置谁可以查看您的个人资料</p>
                                                    </div>
                                                    <select class="morandi-select">
                                                        <option value="private">仅自己</option>
                                                        <option value="friends">好友</option>
                                                        <option value="public">所有人</option>
                                                    </select>
                                                </div>
                                                <div class="privacy-item morandi-privacy-item">
                                                    <div class="privacy-info">
                                                        <h4>学习记录</h4>
                                                        <p>设置学习进度和记录的可见性</p>
                                                    </div>
                                                    <select class="morandi-select">
                                                        <option value="friends">好友</option>
                                                        <option value="private">仅自己</option>
                                                        <option value="public">所有人</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="privacy-card morandi-privacy-card">
                                            <h3>数据管理</h3>
                                            <div class="data-actions">
                                                <div class="data-item morandi-data-item">
                                                    <div class="data-info">
                                                        <h4>数据导出</h4>
                                                        <p>下载您的个人数据副本</p>
                                                    </div>
                                                    <button class="btn morandi-btn-outline">导出数据</button>
                                                </div>
                                                <div class="data-item morandi-data-item">
                                                    <div class="data-info">
                                                        <h4>删除账号</h4>
                                                        <p>永久删除您的账号和所有相关数据</p>
                                                    </div>
                                                    <button class="btn morandi-btn-danger">删除账号</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 联系我们 -->
                            <div class="tab-content" id="contact">
                                <div class="contact-section morandi-contact-section">
                                    <div class="contact-grid">
                                        <div class="contact-methods morandi-contact-methods">
                                            <div class="contact-item morandi-contact-item">
                                                <div class="contact-icon morandi-contact-icon-email">
                                                    <i class="fas fa-envelope"></i>
                                                </div>
                                                <div class="contact-info">
                                                    <h4>邮箱联系</h4>
                                                    <p>support@heritage.cn</p>
                                                </div>
                                            </div>
                                            <div class="contact-item morandi-contact-item">
                                                <div class="contact-icon morandi-contact-icon-phone">
                                                    <i class="fas fa-phone"></i>
                                                </div>
                                                <div class="contact-info">
                                                    <h4>客服热线</h4>
                                                    <p>400-123-4567</p>
                                                </div>
                                            </div>
                                            <div class="contact-item morandi-contact-item">
                                                <div class="contact-icon morandi-contact-icon-chat">
                                                    <i class="fas fa-comments"></i>
                                                </div>
                                                <div class="contact-info">
                                                    <h4>在线客服</h4>
                                                    <p>点击右下角AI助手</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="feedback-form morandi-feedback-form">
                                            <h3>意见反馈</h3>
                                            <form class="contact-form">
                                                <div class="form-row">
                                                    <select class="morandi-input" required>
                                                        <option value="">反馈类型</option>
                                                        <option value="bug">问题报告</option>
                                                        <option value="feature">功能建议</option>
                                                        <option value="content">内容问题</option>
                                                        <option value="other">其他</option>
                                                    </select>
                                                </div>
                                                <div class="form-row">
                                                    <input type="text" class="morandi-input" placeholder="标题" required>
                                                </div>
                                                <div class="form-row">
                                                    <textarea class="morandi-textarea" rows="4" placeholder="详细描述您的问题或建议" required></textarea>
                                                </div>
                                                <div class="form-row">
                                                    <input type="text" class="morandi-input" placeholder="联系方式（选填）">
                                                </div>
                                                <button type="submit" class="btn morandi-btn-submit">提交反馈</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>



    <!-- AI对话按钮 -->
    <button class="ai-chat-button morandi-ai-button" id="aiChatButton" title="AI助手">
        <i class="fas fa-robot"></i>
    </button>

    <!-- AI对话弹窗 -->
    <div class="ai-chat-modal" id="aiChatModal">
        <div class="ai-chat-window morandi-chat-window">
            <!-- 对话窗口头部 -->
            <div class="ai-chat-header morandi-chat-header">
                <div class="ai-chat-title">
                    <i class="fas fa-robot"></i>
                    <span>非遗索思AI助手</span>
                </div>
                <button class="ai-chat-close" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 对话消息区域 -->
            <div class="ai-chat-messages">
                <!-- 消息将通过JavaScript动态添加 -->
            </div>

            <!-- 输入区域 -->
            <div class="ai-chat-input-area">
                <textarea 
                    class="ai-chat-input morandi-chat-input" 
                    id="chatInput" 
                    placeholder="请输入您想了解的非遗问题..."
                    rows="1"
                ></textarea>
                <button class="ai-chat-send morandi-chat-send" id="chatSend" title="发送">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/ai-chat-final.js"></script>
    <script src="scripts/navbar-component.js"></script>
    <script>
        // 初始化导航栏并设置当前页面
        initNavbar();
        setActiveNavPage('profile.html');
    </script>
    <script>
        /**
         * 个人中心页面交互功能
         * 包含选项卡切换、筛选功能等
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 主要选项卡切换功能
            const sectionTabBtns = document.querySelectorAll('.section-tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');

            sectionTabBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');
                    const parentSection = this.closest('.dashboard-section');
                    
                    // 移除同一个section内的所有活动状态
                    const sectionTabBtns = parentSection.querySelectorAll('.section-tab-btn');
                    const sectionTabContents = parentSection.querySelectorAll('.tab-content');
                    
                    sectionTabBtns.forEach(b => b.classList.remove('active'));
                    sectionTabContents.forEach(content => content.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    const targetContent = parentSection.querySelector(`#${targetTab}`);
                    if (targetContent) {
                        targetContent.classList.add('active');
                    }
                });
            });

            // 收藏页面筛选功能
            const filterBtns = document.querySelectorAll('.filter-btn');
            const favoriteItems = document.querySelectorAll('.favorite-item');

            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const filterType = this.getAttribute('data-filter');
                    
                    // 更新按钮状态
                    filterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 筛选内容
                    favoriteItems.forEach(item => {
                        const itemType = item.getAttribute('data-type');
                        if (filterType === 'all' || itemType === filterType) {
                            item.style.display = 'flex';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });

            // 开关切换功能
            const toggleSwitches = document.querySelectorAll('.toggle-switch input[type="checkbox"]');
            toggleSwitches.forEach(toggle => {
                toggle.addEventListener('change', function() {
                    console.log('设置已更新:', this.id, this.checked);
                });
            });

            // 表单提交
            const contactForm = document.querySelector('.contact-form');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('感谢您的反馈，我们会尽快处理！');
                    this.reset();
                });
            }

            // 继续学习按钮点击事件
            const continueButtons = document.querySelectorAll('.morandi-btn-continue');
            continueButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 跳转到走近非遗页面
                    window.location.href = 'heritage.html';
                });
            });

            // 添加页面加载动画
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-in');
                    }
                });
            }, observerOptions);

            // 观察所有卡片元素
            const cards = document.querySelectorAll('.morandi-course-item, .morandi-favorite-item, .morandi-work-item, .setting-card, .privacy-card');
            cards.forEach(card => {
                observer.observe(card);
            });
        });
    </script>
</body>
</html> 